﻿@using DevExpress.Blazor

    <div class="demo-description" id="AppointmentTemplates">
        <h2><DemoNavLink Link="SchedulerTemplates#AppointmentTemplates" />Scheduler - Appointment Templates</h2>
        <p>The DevExpress Scheduler allows you to use templates to customize appointment appearance:</p>
        <ul>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxSchedulerDayViewBase.HorizontalAppointmentTemplate">HorizontalAppointmentTemplate</a> - applied to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSchedulerAppointmentItem#all-day-appointment">all-day appointments</a> that occupy an entire day or several days (displayed horizontally in the all-day panel).</li>
            <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxSchedulerDayViewBase.VerticalAppointmentTemplate">VerticalAppointmentTemplate</a> - applied to other appointments (displayed vertically).</li>
        </ul>
        <p>These properties get a <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSchedulerAppointmentView">DxSchedulerAppointmentView</a> object that contains information about an appointment's settings. To access this object, use the template's <b>context</b> parameter.</p>
        <p>To define appointment appearance, use HTML markup within the <b>HorizontalAppointmentTemplate</b> and <b>VerticalAppointmentTemplate</b> tags.</p>
    </div>

<DxScheduler StartDate="@DateTime.Today" DataStorage="@DataStorage" CssClass="mw-1100">
    <DxSchedulerWeekView ShowWorkTimeOnly="true">
        <HorizontalAppointmentTemplate>
            <div class="card shadow-sm p-1 bg-white text-dark" style="width:100%; font-size: .925em; font-weight:600; box-shadow: .125rem .25rem rgba(34,34,34,0.15)">
                @context.Appointment.Subject
            </div>
        </HorizontalAppointmentTemplate>
        <VerticalAppointmentTemplate>
            <div class="card shadow-sm bg-white p-2" style="overflow: hidden; height: 100%;box-shadow: .125rem .25rem rgba(34,34,34,0.15)">
                <div><span class="badge badge-info mb-1 @context.Status.CssClass">@context.Status.Caption</span></div>
                <span class="text-dark pl-0 mb-1" style="font-weight:600; font-size: .925em;">@context.Appointment.Subject</span>
                <div style="height:100%; display:flex; flex-direction:column; justify-content:flex-end;">
                    <div><span class="badge badge-light"><span class="oi oi-clock pr-1"></span>@context.Appointment.End.ToString("MMM dd HH:mm")</span></div>
                </div>
            </div>
        </VerticalAppointmentTemplate>
    </DxSchedulerWeekView>
</DxScheduler>

<CodeSnippet_Scheduler_AppointmentTemplates></CodeSnippet_Scheduler_AppointmentTemplates>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence"
        }
    };
}
